<template>
    <div id="All">
    	<el-container>
    		<el-header>
    			<el-row type="flex" class="row-bg" justify="space-around">
    				<el-col :span="6">
    					<div class="grid-content bg-purple">
							<span style="float: left; font-size: 30px;">
								<img width="40" :src="img" alt="">
								<strong>HotWind</strong>
							</span>
						</div>
    				</el-col>
    				<el-col :span="6">
    					<div class="grid-content bg-purple-light" style="clear: both;"></div>
    				</el-col>
    				<el-col :span="12">
    					<div class="grid-content bg-purple">
    						<el-row class="demo-avatar demo-basic">
    							<div class="demo-basic--circle" style=" height: 60px; float: right;">
    								<!--<el-avatar :size="50" :src="circleUrl" style="vertical-align: middle;margin-right: 0.625rem;">
    								</el-avatar>-->
    								<el-dropdown>
    									<el-button type="primary" round>
    										{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
    									</el-button>
    									<el-dropdown-menu slot="dropdown">
    										<el-dropdown-item @click.native="shutDown">注销</el-dropdown-item>
											<el-dropdown-item @click.native="dialogFormVisible=true">修改密码</el-dropdown-item>
    									</el-dropdown-menu>
    								</el-dropdown>
    							</div>
    						</el-row>
    					</div>
    				</el-col>
    			</el-row>
    		</el-header>
    		<el-container class="box">
    			<el-aside width="200px" background-color="rgb(118,155,128)">
    				<el-col background-color="rgb(118,155,128)">
    					<el-menu  class="el-menu-vertical-demo" background-color="rgb(118,155,128)"  text-color="#fff"
    					 active-text-color="#ffd04b" :default-active="this.$route.path" router>
    						<el-menu-item-group>
    							<!--<el-menu-item  router="true"  v-for="(children,n) in v.children"  :index="children.path" :key="n">
    									{{children.name}}
    							</el-menu-item>-->
								<el-menu-item  v-if="xuanxian['角色管理']"  router="true"   index="/all/role" >
									角色管理
								</el-menu-item>
								<el-menu-item v-if="xuanxian['员工管理']"  router="true"   index="/all/workersManagement" >
									员工管理
								</el-menu-item>
								<el-menu-item v-if="xuanxian['库存记录']"  router="true"   index="/all/StockAll" >
									库存记录
								</el-menu-item>
								<el-menu-item v-if="xuanxian['出库管理']"  router="true"   index="/all/stockOut" >
									出库管理
								</el-menu-item>
								<el-menu-item v-if="xuanxian['入库管理']"  router="true"   index="/all/stockIn" >
									入库管理
								</el-menu-item>
								<el-menu-item v-if="xuanxian['分类管理']"  router="true"   index="/all/classification" >
									分类管理
								</el-menu-item>
								<el-menu-item v-if="xuanxian['商品信息']"  router="true"   index="/all/goodsInformation" >
									商品信息
								</el-menu-item>
								<el-menu-item v-if="xuanxian['系统通知']"  router="true"   index="/all/systemNotice" >
									系统通知
								</el-menu-item>
								<el-menu-item  v-if="xuanxian['报表统计']"  router="true"   index="/all/excelTotal" >
									报表统计
								</el-menu-item>
    						</el-menu-item-group>
    					</el-menu>
    				</el-col>
					
    			</el-aside>
    			<el-main>
    				<router-view></router-view>
    			</el-main>
    		</el-container>
    	</el-container>
		<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
			<el-form :model="miMaForm">
				<el-form-item label="原始密码" :label-width="formLabelWidth">
					<el-input v-model="miMaForm.oldPwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="新密码" :label-width="formLabelWidth">
					<el-input v-model="miMaForm.newPwd" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" :label-width="formLabelWidth">
					<el-input v-model="miMaForm.rePwd" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="xiuGaiMiMaFn">确 定</el-button>
			</div>
		</el-dialog>
    </div>
</template>

<script>
	import http from '../util/http.js'
    import logo from '../../public/logo.png'
    export default {
        name: "All",
		data() {
			return {
			    img:logo,
				circleUrl: "https://images.pexels.com/photos/839011/pexels-photo-839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
				data1:[],
				userName:"",
                formLabelWidth:'70px',
                dialogFormVisible:false,
                miMaForm:{
                    oldPwd:'',
                    newPwd:'',
                    rePwd:''
				},
                xuanxian:{}
			}
		},
		mounted(){
			console.log(this.$router.options.routes)
			this.data1=this.$router.options.routes;

			var xuanxian=JSON.parse(localStorage.getItem('xuanxian'));
			var json={};
			for(var i=0;i<xuanxian.length;i++){
			    json[xuanxian[i]['permissionName']]=1
			}
			this.xuanxian=json;
		},
		methods:{
			shutDown(){
				localStorage.removeItem('id');
				this.$router.push("/")
				/* http({
					method:'get',
					url:'/logout'
				}).then((res)=>{
					console.log(res)
					if(res.data.code === 200){
						console.log(res)
						this.$router.push("/")
						window.localStorage.removeItem("userName")
					}else{
						alert("失败")
					}
				}).catch(()=>{
					console.log("注销失败")
				}) */
			},
			xiuGaiMiMaFn(){
				http({
					url:'/user/changePwd',
					method:'post',
					data:{
					    id:window.localStorage.getItem("id"),
                        password:this.miMaForm.oldPwd,
                        newPassword:this.miMaForm.rePwd
					}
				}).then((res)=>{
				    this.$message({
						type: 'success',
						message: '修改成功!'
					});
					setTimeout(function(){
						window.location.href='/';
					},200)
				
				})
			}

		},
		created() {
			this.userName = localStorage.getItem("userName")
			console.log(this.userName)
		}
    }

</script>

<style>
	.el-header,
	.el-footer {
		background-color: #066539;
		color: #333;
		text-align: center;
		line-height: 60px;
	}
	/*118 155 128*/
	.el-aside {
		height: 792px;
		background-color: rgb(118,155,128);
		color: #333;
		text-align: center;
		line-height: 200px;
		overflow: hidden;
	}
	body>.el-container {
		margin-bottom: 40px;
	}
	.el-container:nth-child(4) .el-aside {
		line-height: 320px;
	}
	.bg-purple{
		color: #fff;
	}
	.bg-purple img{
		vertical-align: middle;
		margin-right: 10px;
	}
	.el-button.is-round.el-dropdown-selfdefine{
		color: #066539;
		background-color: #fff;
		border-color:#fff
	}
</style>